<template>
  <!-- #ifndef APP-PLUS -->
  <view id="bottom" ref="bottom" class="plus-safe-area-bottom width-full" />
  <!-- #endif -->

  <!-- #ifdef APP-PLUS -->
  <view id="bottom" ref="bottom" class="plus-safe-area-bottom width-full" :style="{height}" />
  <!-- #endif -->
</template>

<script>
export default {
  name: 'PlusSafeAreaBottom',
  data() {
    return {
      height: 0
    }
  },
  mounted() {
    // #ifdef APP-PLUS
    const SystemInfoSync = uni.getSystemInfoSync()
    this.height = SystemInfoSync.safeAreaInsets.bottom + 'px'
    // #endif
  }
}
</script>

<style scoped>
.plus-safe-area-bottom{
  /* #ifndef APP-PLUS */
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
  /* #endif */
}
</style>
